
<template>

    <el-drawer
            class="config-draw"
            :before-close="handleClose"
            :title="typetitle.addTitle"
            :close-on-click-modal="true"
            v-bind="$attrs"
            v-on="$listeners"
            :with-header="false"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="60%">

            <h2>编辑{{typetitle.addTitle}}</h2>
        <!--区域交通-->
        <div class="clear content-form"
             v-if="nowtype==='Area'||nowtype==='Traffic1'||nowtype==='TrafficBrt'">
            <div>
                <p>共{{childrenNum!==0?childrenNum:area2adddata.length}} 个{{typetitle.table2colTitle}}</p>
            </div>

            <div class="submit-content">
                <div class="area-title">
                    <label>{{typetitle.table1colTitle}}</label>
                    <!--<span class="li-title">{{typetitle.table1colTitle}}/{{typetitle.table2colTitle}}</span>
                    <span  class="li-title">序号</span>-->
                </div>

                <div class="area-1">

                    <input type="text"  v-model="allareadata.location_name" placeholder="请输入一级区域名" :class="allareadata.location_name.trim()===''&&issubmit?'iswarninput':''" @blur="edityes()">
                    <input type="number"
                           v-model="allareadata.location_sort"
                            @blur="edityes()"
                           placeholder="序号"
                           onkeyup="if(this.value.length===1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                           onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                </div>
                <div class="area-title"> <label>{{typetitle.table2colTitle}}</label> <i class="el-icon-plus"  @click="addareali()">新增{{typetitle.table2colTitle}}</i> <textarea type="text" placeholder="例如：春熙路 浣花溪" v-model="moreadddata" class="moreaddinput"></textarea>
                    <button @click="moreadd" class="el-icon-plus">批量添加</button> </div>

               <div class="area-2">

                   <ul class="clear">
                       <li v-for="(item,index) in area2adddata"
                           :class="item.state===2?'del-input-item':'canceldel-input-item'"
                       >
                           <input type="text" 
			   :placeholder="[index===area2adddata.length-1?'例如春熙路':'']" 
			   v-model="item.location_name" 
			   :class="item.location_name.trim()===''&&issubmit?'iswarninput':''"
                                  @blur="edityes()"
                           ></input>
                           <input type="number"
                                  v-model="item.location_sort"
                                  placeholder="序号"
                                  @blur="edityes()"
                                  onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                  onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                           <i class="el-icon-delete" title="删除" @click="deleteareali(item,index)" v-if="item.state!==2"></i>
                           <i class="el-icon-refresh-right" title="撤销删除" @click="cancledeleteareali(item,index)" v-else></i>
                       </li>
                   </ul>
               </div>
                   <div class="demo-drawer__footer clear">
                       <el-button type="primary" size="small" @click="saveSubmit">保存</el-button>
                       <el-button @click="cancelForm" size="small">关 闭</el-button>
                   </div>

            </div>
        </div>

    </el-drawer>

</template>

<script>
    export default {
        name: "SysConfigAddDraw",
        //addOrEdit 0 默认值 1修改 2 修改
        props: ["form","addOrEdit",'initstate','typetitle','drawUrl','nowtype','childrenNum'],
        data() {
            return {

                locationtype:{
                    Area:'所属区域',
                    Traffic1:'轨道交通',
                    TrafficBrt:'BRT交通',
                },
                title:'新增区域',

                table: false,
                selectAreaData: [],
                loading: false,
                allcaidata: [],

                formLabelWidth: "80px",
                timer: null,
                //时间选项
                yudingTime: "",
                currentPage:1,
                /*板块级数据*/
                area2adddata:[],
                newaddinptvalue:{
                    location_name:'',
                    location_sort:0,
                    state:0,
                },
                //提交的新增总数据
                allareadata:{
                    location_name:'',
                    location_sort:0,
                    location_id:'',
                    locationList:[],
                    location_type:'',
                    //0新增的，1修改，2，删除
                },

                //批量
                moreadddata:'',
                //控制初始化
                issubmit:false,
//是否执行过删除
                isDelState:false,
                isAddState:false,
                isEditState:false

            };
        },
        computed:{
            //实时数据

        },

        methods: {

            handleClose(done) {
                if (this.loading) {
                    return;
                }
            },
            //初始化
            init(){
                //重置状态
                this.isEditState=false;
                this.isDelState=false;
                this.isAddState=false;
                if (this.addOrEdit===2){
                    //编辑
                    this.allareadata.location_name=this.form.location_name
                    this.allareadata.location_sort=this.form.location_sort
                    this.allareadata.location_id=this.form.location_id
                    this.allareadata.location_type=this.locationtype[this.nowtype],
                    this.allareadata.locationList=[...this.form.locationList]
                    this.area2adddata=[...this.form.locationList]
                    // console.log(this.allareadata)
                }
                else if (this.addOrEdit===1){
                    //添加
                    this.allareadata.location_name=this.form.location_name
                    this.allareadata.location_sort=this.form.location_sort
                    this.allareadata.locationList=this.form.locationList
                    this.allareadata.location_type=this.locationtype[this.nowtype],
                    this.area2adddata=[]
                    // console.log('allareadata')
                    // console.log(this.allareadata)

                }

            },
            //添加一条新的：
            edityes(){
                this.isEditState=true
            },
            addareali(){
                this.issubmit=false
                this.isEditState=true
                this.area2adddata.push(this.newaddinptvalue)
                // console.log( 'this.area2adddata')
                // console.log( this.area2adddata)
                this.newaddinptvalue={
                    location_name:'',
                    location_sort:0,
                    location_id:'',
                    state:0,
                }
            }
            ,
            //改变数据状态2删除
            changedelState(item,type){
                if(type==='删除'){
                    // console.log('删除了')
                    this.isDelState=true
                    for (let i=0;i<this.area2adddata.length;i++){

                        if (this.area2adddata[i].location_id===item.location_id){
                            //修改的

                            this.area2adddata[i].state=2;
                            this.area2adddata=[...this.area2adddata];
                            // console.log('this.area2adddata');
                            // console.log(this.area2adddata);
                            break;
                        }

                    }
                }
                if(type==='撤销'){
                    // console.log('撤销')
                    this.isDelState=true
                    for (let i=0;i<this.area2adddata.length;i++){

                        if (this.area2adddata[i].location_id===item.location_id){
                            //撤销
                            this.$delete( this.area2adddata[i],'state')
                            // console.log('this.area2adddata')
                            // console.log(this.area2adddata)
                            break;
                        }

                    }
                }

            },
            //删除数据
            deleteareali(item,index){
                // console.log('点击删除')
                // console.log(item)
                if (item.location_id!==''&&item.location_id!==undefined){
                    //已有的删除
                    // console.log(1111111111111)
                    this.changedelState(item,'删除')
                    // console.log(this.area2adddata)
                }else {
                    //新增的删除
                    this.area2adddata.splice(index,1)
                    // console.log('点击了删除')
                }

            },
            cancledeleteareali(item,index){
                this.changedelState(item,'撤销')
            },
            //排序
            compare(property){
                return function(a,b){
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
            },
            //批量添加
            moreadd(){
                let arr=this.moreadddata.split(' ')
                //获得当前最大序号
                new Promise(resolve => {
                    if (this.area2adddata.length>0){
                        let arr=[...this.area2adddata]
                        new Promise(resolve => {
                            let sortarr=arr.sort(this.compare('location_sort'))
                            resolve(sortarr)
                        }).then(data=>{
                            //
                            // console.log('最大数')
                            // console.log(data[data.length-1].location_sort)
                            resolve(data[data.length-1].location_sort)
                        })
                    }else resolve(0)
                })
                    .then(maxnum=>{
                        arr.forEach((item,i)=>{

                            if (this.area2adddata.length===1&&this.area2adddata.location_name===''){
                                this.area2adddata=[]
                            }

                            this.area2adddata.push({
                                location_name:item,
                                location_sort:maxnum+i+1,
                                state:0//0为添加 1修改 2删除
                            })
                        })})

            },

            //获取不同操作状态的数据
            typeData(type){
                if (this.addOrEdit===1){
                    //添加打开时
                    return {
                        location_name:this.allareadata.location_name,
                        location_sort:this.allareadata.location_sort,
                        location_id:this.allareadata.location_id,
                        location_type:this.locationtype[this.nowtype],
                        locationList:this.area2adddata,
                    };
                }else if (this.addOrEdit===2) {
                    if (type===2){
                        let selectArea2Data=this.area2adddata.filter(item=>item.state===type)
                        let arr=[]
                        selectArea2Data.forEach(item=>{
                            arr.push(item.location_id)
                        })
                        return arr
                    }else {
                        let selectArea2Data=this.area2adddata.filter(item=>item.state!==2)
                        return {
                            location_name:this.allareadata.location_name,
                            location_sort:this.allareadata.location_sort,
                            location_id:this.allareadata.location_id,
                            location_type:this.locationtype[this.nowtype],
                            locationList:selectArea2Data,
                        };
                    }

                }

            },

            //修改数据。

            //添加请求
            addpost(){
                this.axios({
                    method:'post',
                    data:this.typeData(0),
                    url:this.drawUrl.addurl,
                }).then(data=>{
                    // console.log('添加')
                    // console.log(data)
                    if (data.data.code===200){
                        this.$message({
                            type:'success',
                            message:data.data.msg
                        })
                        this.$emit('onclose',true)
                    }
                    else {
                        this.$message({
                            type:'warning',
                            message:data.data.msg
                        })
                        this.$emit('onclose',true)
                    }
                })
            },
            //删除请求
            delPost(){

                this.axios({
                    method:'post',
                    url:this.drawUrl.delurl,
                    data:this.typeData(2),
                }).then(data=>{
                    // console.log('删除成功')
                    // console.log(data)
                    this.$message({
                        type:'success',
                        message:data.data.msg
                    })
                    this.$emit('onclose',true)
                })
            },
            //编辑请求
            editPost(){
                // console.log('修改')
                // console.log(this.allareadata)

                    this.axios({
                        method:'post',
                        url:this.drawUrl.editurl,
                        data:this.typeData(1),
                    }).then(data=>{
                        // console.log('修改成功')
                        // console.log(data)
                        this.$message({
                            type:'success',
                            message:data.data.msg
                        })
                        this.$emit('onclose',true)
                    })

            },
            //提交
            saveSubmit(){

                let area2adddataiserror=this.area2adddata.filter(item=>item.location_name.trim()==='')
                // console.log(area2adddataiserror)
                if (this.allareadata.location_name.trim()===''||area2adddataiserror.length>0){

                    // console.log('报警了')
                    this.issubmit=true
                    this.$message({
                        type:'error',
                        message:'操作失败，有未填写的项目存在。'
                    })
                }else {
                    this.issubmit=false
                    if (this.addOrEdit===1){
                        this.addpost()
                    }else if (this.addOrEdit===2) {

                    if (this.isDelState&&this.typeData(2).length>0){

                        // console.log('删除的数据~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~')
                        // console.log(this.typeData(2))
                        this.delPost()
                    }
                    if (this.isEditState){
                        // console.log('修改的数据~~~~~~~~~~~~~~~~~')
                        // console.log(this.typeData(1))
                        this.editPost()
                    }
                    }

                }
            },
            //取消操作
            cancelForm() {
                this.issubmit=false
                this.$emit("onclose",false);

            },


        },


        watch:{
            initstate(){
                // console.log('`````````````````this.form`````````````')
                // console.log(this.form)
                if (this.initstate){
                    console.log(this.initstate)
                    this.init()
                }
            }
        }
    };
</script>

<style lang="less" scoped>


   /* .el-drawer.rtl{
        overflow: scroll;
    }*/
   /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  /*  .el-drawer__body {
      !*  overflow: auto;*!
         overflow-y: auto;
    }

    !*2.隐藏滚动条，太丑了*!
    .el-drawer__container ::-webkit-scrollbar{
        display: none;
    }
    .clear::after{
        content: '';
        display: block;
        clear:both ;
    }
    h2 {
        font-size: 1.6rem;
        font-weight: 400;
        padding: 2rem;

        .selectTabeleTips {
            font-size: 12px;
            line-height: 16px;
            font-weight: initial;
            color: #aaaaaa;
        }

        >span{
            font-size: 2rem;
            font-weight: bold;

            color: #ff9d2b;
        }
        .el-button{
            float: right ;
            color: #ffffff;
        }
    }
    .content-form {
        padding: 0 2rem 2rem;
        min-width: 800px;
    }
    .demo-drawer__footer{
        padding: 20px 100px;

        .el-button:nth-of-type(1){
            float: left;
        }
        .el-button:nth-of-type(2){
            float: right;
        }
    }
    .area-title{
        position: relative;
        margin: 10px 0;
        padding-left:10% ;
        width: 80%;
        height: 40px;
        line-height: 40px;
        .el-icon-plus{
            border: none;
            display: inline-block;
           border-radius: 4px;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            color: white;
            cursor: pointer;
            margin-left: 4%;
            background-color: #ff9d2b;

        }
        label{
           font-size: 18px;
            position: absolute;
            top:0;
            left: 0;
            background-color: #ff9d2b;
            width: 10%;
            height: 100%;
            text-align: center;
            color: white;
        }
        .li-title{
            display: inline-block;
            text-align: center;
        }
        .li-title:nth-of-type(1){

            width: 15%;
        }
        .li-title:nth-of-type(2){
            width:10%;
        }

        .moreaddinput{
           //限制最高宽度。
            position: absolute;
            right: 0;
            top:0;
            display: inline-block;
            margin-left: 20px;
            width: 300px;
            max-height:40px ;
            outline: none;
            resize: none;
        }
    }
    .area-1{

        padding-left:8% ;
        width: 30%;
        !*input:nth-of-type(1){
            width: 50%;
        }*!
        input:nth-of-type(2){
            width: 20%;
        }
    }

   .area-2{
       padding-left:8% ;


       ul{
           padding:0;
           margin: 0;
       }
           li{
               list-style: none;float: left;
               width: 30%;
               height: 40px;
               padding: 0;
               margin: 10px 5px;
               input:nth-of-type(1){
                   width: 50%;
               }
               input:nth-of-type(2){
                   width: 20%;
               }
               .el-icon-delete{
                   cursor: pointer;
               }
               &.del-input-item{

                   input{
                       background-color: #cdd0da;
                   }
               }
               &.canceldel-input-item{
                   input{
                       background-color: #ffffff;
                   }
                               }
               .el-icon-refresh-right{
                   cursor: pointer;
               }
           }

   }
   .area-2,.area-1{
       .iswarninput{
           border: 1px solid red;
       }
       input{
           outline: none;
           box-sizing: border-box;
           border: 1px solid #b6b6b6;
           height: 40px;
           line-height: 40px;
       }
       input:nth-of-type(1){
           padding:4px 8px;
       }
       input:nth-of-type(2){
           padding:4px 8px;
           margin: 0 8px;
       }
   }
    .el-drawer{
        outline: none;
    }
*/
</style>